<template>
	<div class="extra-data-item flex" style="padding: 24px; padding-bottom: 10px">
		<div class="f1">
			<p class="extra-data-title">关系类型</p>
			<a-select
				auto-complete="off"
				:trigger-props="{ contentStyle: { width: 'max-content', minWidth: '120px' } }"
				allow-search
				size="mini"
				v-model="relationForm.type"
				:style="{ width: '120px' }"
				:placeholder="$t('base.placeholderSelect')"
			>
				<a-option v-for="child in relationList" :value="child.value" :key="child.value">
					{{ child.label }}
				</a-option>
			</a-select>
		</div>
		<div class="f1" style="padding-left: 40px">
			<p class="extra-data-title">{{ $t("dataModel.targetObj") }}</p>
			<a-select allow-search size="mini" v-model="relationForm.target" style="width: 100%" :placeholder="$t('base.placeholderSelect')" @change="getFieldList(null)">
				<a-option v-for="child in dataList" :value="child.id" :key="child.id">
					{{ child.name }}
				</a-option>
			</a-select>
		</div>
	</div>
	<setList ref="listRef" v-model="relationForm.list" pageName="assistField">
		<template #label>
			<p class="extra-data-title">对象辅助字段显示设置</p>
		</template>
		<template #add="{ addList }">
			<a-dropdown>
				<p class="add-text">
					<icon-plus />
					添加{{ $t("dataModel.assist") }}
				</p>
				<template #content>
					<a-doption v-for="item in fieldList" :disabled="relationForm.list.map((i) => i.id).includes(item.id)" @click="addList(item)" :key="item.id">{{ item.name }}</a-doption>
				</template>
			</a-dropdown>
		</template>
	</setList>
</template>

<script setup lang="ts">
import { ApiFieldsList } from "@/api/customerManage/setting";
import { columnTitle } from "@/api/customerManage/customer";

import setList from "./setList.vue";
import { useI18n } from "@/hooks/useI18n";
const listRef = ref(null);
const message = useMessage();
const { t } = useI18n();
const props = defineProps({
	bizId: {
		type: [Number, String],
		default: 0
	},
	form: {
		type: Object,
		default: () => {}
	}
});

const relationList = ref([
	{ value: "select", label: t("fieldType.user_obj.list1") },
	{ value: "multiSelect", label: t("fieldType.user_obj.list2") }
]);

const relationForm = ref({
	type: "select",
	target: "",
	list: []
});
const dataList = ref([]);
const getList = async () => {
	
	const data = await ApiFieldsList({});
	dataList.value = data.filter((item) => item.id != props.bizId);
	// dataList.value = data;
	let extra = {};
	if (props.form?.extra) {
		extra = JSON.parse(props.form?.extra);
		relationForm.value.type = extra?.selectType;
	}
	if (Array.isArray(dataList.value) && dataList.value.length) {
		relationForm.value.target = extra?.biz || dataList.value?.[0]?.id;
		let arr = null
		if(extra?.dataList){
			arr = JSON.parse(extra?.dataList)
		}
		getFieldList(arr);
	}
};

const fieldList = ref([]);
const keyInfo = ref({})
const getFieldList = async (list) => {
	// 获取字段列表
	const data = await columnTitle({
		bizId: relationForm.value.target
	});
	fieldList.value = data;
	keyInfo.value = data.find((i) => i.isKey) || {}  // 关键字段
	// 如果有数据就回显
	if (Array.isArray(list)) {
		relationForm.value.list = list;
	} else {
		relationForm.value.list = [];
		if (keyInfo.value?.id && listRef.value) {
			nextTick(() => {
				listRef.value.addList(keyInfo.value);
			});
		}
	}
};

const getForm = () => {
	const { target, list, type } = relationForm.value;
	if (!target) {
		message.error(t("base.placeholderSelect") + t("dataModel.targetObj"));
		return false;
	}
	if (!list.length) {
		message.error(t("base.placeholderSelect") + t("dataModel.assist"));
		return false;
	}
	const obj = {
		biz: target,
		showConfigs: list.map((i) => i.id),
		selectType: type,
		dataList: JSON.stringify(list)
	};
	return obj;
};
watch(
	() => props.form,
	(data) => {
		getList();
	},
	{ immediate: true }
);

const relationInfo = computed(() => {
	return dataList.value.find((i) => i.id == relationForm.value.target);
});

defineExpose({
	getForm,
	relationInfo,
	keyInfo
});
</script>

<style scoped lang="scss">
.extra-data-title {
	font-size: 10px;
	color: #c9cdd4;
	margin-bottom: 6px;
}
</style>
